<template>
	<view class="shop_withdrawal">
		<p style="font-size: 20px;margin-left: 20px;margin-top: 14px;">转入账户</p>
		<view class="shop_withdrawal_relation" v-show="alipayBindShow">
			<image src="../../static/zhifubao.png" class="shop_withdrawal_image"></image>
			<p @click="toBindClick" style="margin-left: 10px;float: left;margin-top: 8px;border-bottom: 2px solid skyblue;">请先绑定你的支付宝账号</p>
		</view>
		<view class="shop_withdrawal_relation" v-show="alipayShow">
			<image src="../../static/zhifubao.png" class="shop_withdrawal_image"></image>
			<p  style="margin-left: 10px;float: left;margin-top: 8px;">（{{this.alipayName}})账号</p>
		</view>
		<p style="font-size: 20px;margin-left: 20px;margin-top: 30px;">提现金额</p>
		<u--input
			fontSize="25"
			prefixIcon="￥"
			style="margin-top: 30px;margin-left: 20px;"
			placeholder="请输入提现金额"
			v-model="withdrawal"
			border="none"
			type="number"
		 ></u--input>
		<p style="font-size: 14px;color:#929292;margin-top:40px;margin-left: 20px;;">可提现金额{{this.total}}元，<span style="color:#26C2FD;font-size: 15px;font-weight: bold;" @click="allWithdrawal">全部提现</span></p>
		<u-button type="primary" @click="submitWithdrawal" text="确认提现" shape="circle" style="margin-left: 20px;float:left;width: 320px;margin-top: 200px;font-weight: bold;"></u-button>
		<!-- 支付宝绑定账号弹窗 -->
		<u-popup :show="toBind"  mode="center" @close="toBindClose" >
			<view style="width: 300px;height: 200px;" >
				<u-form :model="applyFormData" :rules="applyRules" ref="applyFormData">
					<u-form-item label-width="60"  style="margin-top:40px" prop="alipayLoginName">
						 <u--input
							placeholder="请输入支付宝账号"
							border="surround"
							v-model="applyFormData.alipayLoginName"
							type="number"
						  ></u--input>
					</u-form-item>
				</u-form>
				<u-button type="primary" style="width: 90px;margin-top: 30px;" text="确定" @click="submitLoginName"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 绑定支付宝模块默认false
				alipayBindShow:false,
				// 支付宝模块默认false
				alipayShow:false,
				//绑定支付包账号弹窗默认false
				toBind:false,
				// 输入的支付宝账号
				applyFormData:{
					id:'',
					alipayLoginName:''
				},
				//
				alipayName:'',
				// 绑定账号校验规则
				applyRules:{
					alipayLoginName:[
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '请输入正确手机号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					]
				},
				// 获取头部的用户id
				id:'',
				// 存放初始化查询商家的结果
				shopUserList:[],
				// 提现金额
				withdrawal:'',
				// 提现的总金额
				total:10000,
			}
		},
		onLoad(){
			// 获取头部的用户id
			this.id = uni.getStorageSync('id')
			// 初始化 查询商家绑定的支付宝账号
			this.getShopLoginName()
		},
		methods:{
			
			//初始化查询商家绑定的支付宝账号
			getShopLoginName(){
				this.$myRequest({
					url:'/eat-service/shoplogin/getShopLoginName',
					data:{
						id:this.id
					}
				}).then(res=>{
					this.alipayName  = res.data.obj.alipayLoginName
					if(this.alipayName){
						this.alipayShow = true
					}else{
						this.alipayBindShow = true
					}
				})
			},
			//点击绑定支付宝账号弹出弹窗
			toBindClick(){
				this.toBind = true
			},
			// 关闭绑定支付宝账号关闭弹窗
			toBindClose(){
				this.toBind = false
			},
			// 绑定支付宝账号
			submitLoginName(){
				this.$refs.applyFormData.validate().then(res => {
					this.applyFormData.id = uni.getStorageSync('id')
					this.$myRequest({
						url:'/eat-service/shoplogin/bindApliyLoginName',
						data: JSON.stringify(this.applyFormData),
						method:'POST',
					}).then(res=>{
						if(res.data.flag!=null){
							this.toBindClose()
							uni.showToast({
								title: '绑定成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 2000
							})
							this.alipayBindShow = false
							this.alipayShow = true
							this.alipayName = this.applyFormData.alipayLoginName
						}
					})
				})
			},
			// 全部提现
			allWithdrawal(){
				this.withdrawal = this.total
			},
			// 提交金额
			submitWithdrawal(){
				if(this.withdrawal<0.01 || this.withdrawal === ''){
					uni.showToast({
						title: '提现的金额不能少于0.01或者为空',
						duration: 2000
					})
				}
				else if(this.withdrawal>this.total){
					uni.showToast({
						title: '提现金额不足，请查看对应金额',
						duration: 2000
					})
					
				}
				else{
					uni.showToast({
						title: '提现成功！',
						duration: 2000
					})
					this.total = this.total - this.withdrawal
				}
			},
		}
	}
</script>

<style scoped>
	.shop_withdrawal{
		width: 414px;
		height: 852px;
	}
	.shop_withdrawal_relation{
		margin-left: 20px;
		width: 350px;
		height: 40px;
		overflow: hidden;
		margin-top: 20px;
	}
	.shop_withdrawal_image{
		width: 35px;
		height: 35px;
		float: left;
	}
</style>